 import React from 'react';
 import { Editor } from '@tinymce/tinymce-react';
 import * as BdHelper from "@/utils/BdHelper";
 import {  Form,Spin  } from 'antd';
 <script src="./js/tinymce/tinymce.min.js"></script>
//  import Editor from './tinymce.min.js'
 interface PropsType {
    name: string;
    initialValue?: any;
    itemLayout?: {};
    rules?: any;
    form: any;
    onChange:any;
  }
const FormItem = Form.Item;
const token = BdHelper.getBdToken();
 class tinyEditor extends React.Component {
    constructor(props:PropsType){
        super(props);
    }

    state: any = {
      loading: true,
    };
    componentDidMount(){
       setTimeout(()=>{
        this.setState({
          loading: false,
        })
     },1000)
      
    }
   handleEditorChange = (content, editor) => {
     console.log('Content was updated:', content);
   }

   render() {
    const {initialValue,form,name,onChange} = this.props;
    const {loading} = this.state;
    const editorObj={
      height: '500',
      menubar: false,
      content_style: "p {margin: 0px; border:0px ; padding: 0px;}",
      fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
      language: 'zh_CN',
      // lineheight_val: '1 1.5 1.6 1.75 1.8 2 3 4 5',
      lineheight_formats: "10px 11px 12px 14px 16px 18px 20px 22px 24px 26px 30px 34px 36px 40px 46px 50px",
      plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table paste code help wordcount',
        'code lineheight'
      ],
    
    //   plugins: 'table lists link image preview code',
      toolbar: `formatselect | lineheight | code | preview | bold italic strikethrough forecolor backcolor | link image | alignleft aligncenter alignright alignjustify  | 
      numlist bullist outdent indent | fontsizeselect | fontselect`,
      
      relative_urls: false,
      file_picker_types: 'image',
      images_upload_url: '',
      image_advtab: true,
      image_uploadtab: true,
      images_upload_handler:(blobInfo, success, failure)=>{
          //这里写你上传图片的方法
          var formD = new FormData();
          var xhr = new XMLHttpRequest();
          xhr.open( 'POST', '/api/admin/file/upload', true );
          xhr.setRequestHeader('Authorization',`Bearer ${token}`)
          formD.append('file',blobInfo.blob())
          formD.append('type','image')
          xhr.send(formD);
          xhr.onload = function () {
            var json;
            if (xhr.status !== 200) {
                failure('HTTP Error: ' + xhr.status);
                return;
            }
            json = JSON.parse(xhr.responseText); 
            var response = xhr.response;
            var file = eval('('+ response +')');
            console.log(file)
            if(file.code == 0){
               success(file.data.file_url);
            }else{
              failure(file.msg)
            }  
        };
      }
     }
    
     return (
       <Spin spinning={loading}>
       
        <FormItem >
        {form.getFieldDecorator(name, {
        })(<Editor
            inline={false}
           //  selector='editorStateRef' 
            apiKey='xsu65bcxkeiizabjn5v3a7c5aqes073abrr5ulmsox5rz36x'
            initialValue={initialValue}
            init={{...editorObj}}
            onEditorChange={onChange}
            // scriptLoading={{ async: true }}
          />)}
      </FormItem>
    </Spin>
     );
   }
 }

 export default tinyEditor;